<template>
	<view>
		<view class="blank30"></view>
		<view class="wrapper">
			<u--form :labelStyle="formLabelStyle" labelPosition="top" :model="form" :rules="rules" ref="uForm"
				labelWidth="300">
				<u-form-item label="School" prop="school">
					<u--input :customStyle="inputCustomStyle" placeholder="please enter" v-model="form.school"
						border="none" fontSize="12px"></u--input>
				</u-form-item>
				<u-form-item label="Degree" prop="schoolSid">
					<view style="position: relative;width: 100%;" @click="openPicker">
						<u--input :value="schoolSidName" fontSize="12px" :customStyle="inputCustomStyle" placeholder="please choose" border="none" disabled>
							<view slot="suffix">
								<u-icon name="arrow-down"></u-icon>
							</view>
						</u--input>
					</view>
				</u-form-item>
				<u-form-item label="Major" prop="major">
					<u--input :customStyle="inputCustomStyle" placeholder="please enter" v-model="form.major"
						border="none" fontSize="12px"></u--input>
				</u-form-item>

				<view class="flex justify-between align-start">
					<view style="width: 320upx;">
						<u-form-item label="Start Time" prop="startDate" labelWidth="100">
							<view style="position: relative;width: 100%;">
								<u--input :customStyle="inputCustomStyle" placeholder="please choose"
									:value="form.startDate" border="none" fontSize="12px" disabled
									@click.native="chooseDate('startDate')">
									<view slot="suffix">
										<image class="date-icon" src="/static/images/rl.jpg" mode="aspectFit"></image>
									</view>
								</u--input>
							</view>
						</u-form-item>
					</view>
					<view style="width: 320upx;">
						<u-form-item label="End Time" prop="endDate" labelWidth="100">
							<view style="position: relative;width: 100%;">
								<u--input :customStyle="inputCustomStyle" placeholder="please choose"
									:value="form.endDate" border="none" fontSize="12px" disabled
									@click.native="chooseDate('endDate')">
									<view slot="suffix">
										<image class="date-icon" src="/static/images/rl.jpg" mode="aspectFit"></image>
									</view>
								</u--input>
							</view>
						</u-form-item>
					</view>
				</view>
				<u-form-item label="Educational experience" prop="content">
					<u--textarea v-model="form.content" placeholder="Please enter" :customStyle="inputCustomStyle"
						border="none" fontSize="12px" :autoHeight="true" class="g_textarea_min_height" count  maxlength="300"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<view class="blank30"></view>
		<fixed-bottom-btn :remove="!!this.id" @submit="submit" @remove="remove"></fixed-bottom-btn>		

		<u-datetime-picker :closeOnClickOverlay="true" :maxDate="datetimePickerMaxDate" :minDate="datetimePickerMinDate" :show="datePickerShow" mode="date" @confirm="onConfirmDatePicker" @close="onCloseDatePicker"
			@cancel="onCancelDatePicker" cancelText="Cancel" confirmText="Confirm"></u-datetime-picker>

		<u-picker :closeOnClickOverlay="true" :show="pickerShow" :columns="pickerColumns" @confirm="onConfirmPicker" @close="onClosePicker"
			@cancel="onCancelPicker" keyName="label" cancelText="Cancel" confirmText="Confirm"></u-picker>
			

	</view>
</template>

<script>
	import fixedBottomBtn from '@/components/fixed-bottom-btn.vue';
	import {
		dicts_by_key,
		school,
		school_sid,
		school_sid_delete,
		school_sid_edit
	} from '@/common/api.js';
	export default {
		components: {
			fixedBottomBtn
		},
		data() {
			return {
				id:'',
				form: {
					"content": "",
					"endDate": "",
					"major": "",
					"note": "",
					"school": "",
					"schoolSid": "",
					"startDate": "",
					"status": 0
				},
				rules: {
					school: [{
						required: true,
						message: 'School required',
						trigger: ['blur', 'change']
					}],
					schoolSid: [{
						required: true,
						message: 'Degree required',
						trigger: ['blur', 'change']
					}],
					major: [{
						required: true,
						message: 'Major required',
						trigger: ['blur', 'change']
					}],
					startDate: [{
						required: true,
						message: 'Start Time required',
						trigger: ['blur', 'change']
					}],
					endDate: [{
						required: true,
						message: 'End Time required',
						trigger: ['blur', 'change']
					}],
					content: [{
						required: true,
						message: 'Educational experience required',
						trigger: ['blur', 'change']
					}],
				},
				schoolSidPicker:[],
				schoolSidName:'',
				pickerShow: false,
				pickerColumns: [],
				datePickerShow: false,
				datePickerKey: ''
			}
		},
		computed:{
			
		},
		methods: {
			chooseDate(k) {
				this.datePickerKey = k;
				this.datePickerShow = true;
			},
			onCloseDatePicker(e) {
				this.datePickerShow = false;
			},
			onCancelDatePicker() {
				this.datePickerShow = false;
			},
			onConfirmDatePicker(e) {
				let d = this.formatDatetime(e.value);
				this.form[this.datePickerKey] = d;
				this.datePickerShow = false;
			},
			onClosePicker(e) {
				this.pickerShow = false;
			},
			onCancelPicker() {
				this.pickerShow = false;
			},
			onConfirmPicker(e) {
				this.pickerShow = false;
				this.form.schoolSid = e.value[0].value;
				this.schoolSidName = e.value[0].label;
			},
			openPicker() {
				let pickerColumns = this.schoolSidPicker;
				this.pickerColumns = [pickerColumns];
				this.pickerShow = true;
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					let data = JSON.parse(JSON.stringify(this.form));
					uni.showLoading({
						title: 'loading'
					});
					if(this.id){
						school_sid_edit(this.id,data).then(async (res) => {
							uni.$u.toast('success');
							setTimeout(() => {
								uni.$emit('refresh_index');
								this.navBack();
							}, 2000)
						})
					}else{
						data.candidateSid = this.sid;
						school(data).then(async (res) => {
							uni.$u.toast('success');
							setTimeout(() => {
								uni.$emit('refresh_index');
								this.navBack();
							}, 2000)
						})
					}
				}).catch(errors => {
					try {
						uni.$u.toast(errors[0].message)
					} catch (e) {
						uni.$u.toast('please enter')
					}
				})
			},
			remove(){
				uni.showLoading({
					title: 'loading'
				});
				school_sid_delete(this.id).then(async (res) => {
					uni.$u.toast('success');
					uni.$emit('refresh_index');
					setTimeout(() => {
						this.navBack();
					}, 2000)
				})
			},
			getData() {
				if (!this.id) {
					return false;
				}
				uni.showLoading({
					title: 'loading'
				});
				school_sid(this.id).then(async (res) => {
					let data = res.data;
					for (let key in this.form) {
						this.form[key] = data[key]
					};
					this.schoolSidName = data.schoolName;
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
			init(){
				dicts_by_key('degree').then(async (res) => {
					let { data } = res;
					let schoolSidPicker = data.map(v=>{
						return {
							label:v.memberName,
							value:v.sid
						}
					});
					this.schoolSidPicker = schoolSidPicker;
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			uni.$off('refresh_experience');
			uni.$once('refresh_experience', (v) => {
				this.getData();
			})
		},
		onLoad(d) {
			this.id = d.id||'';
			this.init();
			this.getData();
		},
		onPullDownRefresh() {
			this.getData();
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss">
	.date-icon {
		width: 40upx;
		height: 40upx;
	}

	/deep/.g_textarea_min_height {
		.u-textarea__field {
			min-height: 190upx;
			font-size: 12px;
		}
	}
</style>